// import ContractLayout from '@/layouts';
// import { getRootDetails } from '@/services/listSummary';
import { Modal, Timeline } from 'antd';
import moment from 'moment';
import { TimeLine_Item } from './constants';
import styles from './index.less';

interface Props {
  state: number;
  color: string;
  operattime: any;
  orderId: string;
  onCancel: () => void;
  visible: boolean;
}

const Logistics: React.FC<Props> = ({ state, color, operattime, visible, onCancel }) => {
  // 操作时间的时间戳格式转换
  const operatTime = (time: any) => {
    const timeCurrent = moment(Number(time)).format('YYYY.MM.DD  HH:mm:ss');
    return time === undefined ? '' : timeCurrent;
  };
  console.log(Number(state));

  return (
    <Modal visible={visible} onCancel={onCancel} title={'查看物流'} footer={null}>
      <div className={styles.content}>
        <div className={styles.timeLineStyle}>
          <Timeline mode={'left'}>
            {TimeLine_Item.map((item: any) => (
              <Timeline.Item
                key={item.key}
                label={operatTime(operattime)}
                className={
                  state === item.key + 1
                    ? styles.checkingItem
                    : state < item.key + 1
                    ? styles.nullItem
                    : styles.existItem
                }
                dot={
                  state === item.key + 1 ? (
                    <div>
                      <div
                        style={{
                          backgroundColor: '#fff',
                          width: 6,
                          height: 6,
                          borderRadius: '50%',
                        }}
                      />
                    </div>
                  ) : state < item.key + 1 ? (
                    <div>
                      <div
                        style={{
                          backgroundColor: '#bebebe',
                          width: 6,
                          height: 6,
                          borderRadius: '50%',
                        }}
                      />
                    </div>
                  ) : (
                    <div>
                      <i className="i icon-duihao1" style={{ color: '#748BFF' }} />
                    </div>
                  )
                }
              >
                <div>{item.value}</div>
                {Number(state) === Number(item.key) + 1 && (
                  <div
                    style={{
                      border: `1px solid ${color}`,
                      borderRadius: 13,
                      margin: '1px 0 6px 18px',
                      color: color,
                      width: 76,
                      height: 24,
                      textAlign: 'center',
                    }}
                  >
                    <span style={{ fontSize: 8 }}>{item.some}</span>
                  </div>
                )}
              </Timeline.Item>
            ))}
          </Timeline>
        </div>
      </div>
    </Modal>
  );
};
export default Logistics;
